<template>
	<twoColumn bottom-title-left="未选择的">
		<template #top-title-left>
			已选择的
			<span class="text-button" style="margin-left: 15px" @click="setEdit">
				{{ data.edit ? '完成' : '编辑' }}
			</span>
		</template>
		<template #top-title-right>
			<span class="add-path text-button" @click="addSavePath"><i class="iconfont icon-add-s"></i>添加路径</span>
		</template>
		<template #top-comtent>
			<dirPahtItem
				v-for="(item, index) in data.separatelySavePaths"
				:key="item.dirPaht"
				:children="item.children"
				:edit="data.edit"
				:path="item.dirPaht"
				:is-add="selective"
				@add="addImage(item)"
				@remove="removeSavePath(index)">
				<imageChildrenItem
					v-for="(item2, index2) in item.children"
					:key="item2.target"
					:src="getImgSrc(item2)"
					:text="item2.target"
					@remove="removeImage(item, index2)" />
			</dirPahtItem>
		</template>
		<template #bottom-title-right>
			<span class="text-button" style="margin-right: 15px" @click="invert">反选</span>
			<el-checkbox v-model="selectAll" label="全选" size="small" />
		</template>
		<template #bottom-comtent>
			<imageItem
				v-for="item in data.imangInfoList"
				:key="item.imageInfo.target"
				v-model="item.checked"
				:src="getImgSrc(item.imageInfo)"
				:text="item.imageInfo.target" />
		</template>
	</twoColumn>
</template>

<script setup lang="ts">
import { API } from '@v/utils/API';
import { useRootStore } from '@v/store';
import { reactive, computed, watch } from 'vue';
import { getImgSrc } from '@v/methods/getImgSrc';
import { ImageInfo } from '@p/main-windowObject';
import { useMode1Store } from '@v/store/mode/mode1';
import twoColumn from '../../template/base/twoColumn.vue';
import imageItem from '../../template/base/imageItem.vue';
import dirPahtItem from '../../template/base/dirPahtItem.vue';
import { Mode1Data_separatelySavePaths } from '@p/main-modeData';
import imageChildrenItem from '../../template/base/imageChildrenItem.vue';

const store = useRootStore();
const mode1Store = useMode1Store();

type NewImangInfo = {
	imageInfo: ImageInfo;
	checked: boolean;
};

function getImangInfo(): NewImangInfo[] {
	if (store.fileInfo) {
		return store.fileInfo.imageInfo
			.filter((i) => i.type === 'url')
			.map((item) => {
				return {
					imageInfo: item,
					checked: false,
				};
			});
	} else {
		return [];
	}
}

type Data = {
	imangInfoList: NewImangInfo[];
	separatelySavePaths: Mode1Data_separatelySavePaths[];
	edit: boolean;
};

const data = reactive<Data>({
	imangInfoList: getImangInfo(),
	separatelySavePaths: [],
	edit: false,
});

// 全选
let selectAll = computed({
	get() {
		return data.imangInfoList.every((i) => i.checked);
	},
	set(value) {
		for (let i = 0; i < data.imangInfoList.length; i++) {
			data.imangInfoList[i].checked = value;
		}
	},
});

// 是否有选择的
let selective = computed(() => {
	return data.imangInfoList.some((i) => i.checked);
});

// 反选
function invert() {
	for (let i = 0; i < data.imangInfoList.length; i++) {
		data.imangInfoList[i].checked = !data.imangInfoList[i].checked;
	}
}

// 添加保存路径
function addSavePath() {
	API.invoke('select-dir', '添加保存路径', void 0, true).then((paths) => {
		if (paths) {
			paths.forEach((p) => {
				data.separatelySavePaths.push({
					dirPaht: p,
					children: [],
				});
			});
		}
	});
}

// 移除保存路径
function removeSavePath(index: number) {
	const obj = data.separatelySavePaths[index];

	if (obj.children.length > 0) {
		const arr = obj.children.map((t) => {
			return {
				imageInfo: t,
				checked: false,
			};
		});

		data.imangInfoList.unshift(...arr);
	}

	data.separatelySavePaths.splice(index, 1);

	if (data.separatelySavePaths.length === 0) {
		data.edit = false;
	}
}

// 切换编辑模式
function setEdit() {
	if (data.separatelySavePaths.length > 0) {
		data.edit = !data.edit;
	}
}

// 添加路径
function addImage(obj: Mode1Data_separatelySavePaths) {
	let arr = [];

	for (let i = 0; i < data.imangInfoList.length; i++) {
		if (data.imangInfoList[i].checked) {
			arr.push(data.imangInfoList[i].imageInfo.target);
		}
	}

	for (let i = 0; i < arr.length; i++) {
		for (let j = 0; j < data.imangInfoList.length; j++) {
			if (arr[i] === data.imangInfoList[j].imageInfo.target) {
				obj.children.push(data.imangInfoList.splice(j, 1)[0].imageInfo);
				break;
			}
		}
	}
}

// 删除路径
function removeImage(obj: Mode1Data_separatelySavePaths, index: number) {
	const s = obj.children.splice(index, 1)[0];

	data.imangInfoList.unshift({
		imageInfo: s,
		checked: false,
	});
}

watch(
	data.separatelySavePaths,
	(newval) => {
		mode1Store.setSeparatelySavePaths(newval);
	},
	{ immediate: true }
);

mode1Store.setLength(data.imangInfoList.length);
</script>

<style scoped lang="scss">
.add-path {
	.iconfont {
		font-size: 13px;
	}
}
</style>
